import React, { FC, useEffect, useState } from "react";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import { useRequest } from "ahooks";
import { updateQuestionData, CopyQuestionData } from "../../service";
import { Button, Flex, Divider, Tag, Popconfirm, message, Modal } from "antd";
import { useNavigate, Link } from "react-router-dom";
import { DeleteOutlined, CopyOutlined, StarOutlined, EditOutlined, BarChartOutlined } from "@ant-design/icons";

const bindClassNames = classNames.bind(style);

interface questionItem {
  id: string;
  title: string;
  isPublished: boolean;
  isStart: boolean;
  isDelete: boolean;
  answerCount: number;
  createTime: string;
  deletequestionData: (id: string) => void;
  publishquestionDate: (id: string) => void;
  startquestionData: (id: string, flag: boolean) => void;
}

const QuestionCard: FC<questionItem> = (props) => {
  const [messageApi, contextHolder] = message.useMessage();
  const { id, answerCount, createTime, title, isPublished, isDelete, isStart, publishquestionDate } = props;

  const nav = useNavigate();
  //表示是否标星的双向绑定数据
  const [startState, setstartState] = useState(isStart);
  //对问卷进行标星
  const { run: startquestionData, loading: startquestionData_loading } = useRequest(
    async () => {
      const res = await updateQuestionData(id, {
        isStart: !isStart,
      });
      console.log("标星12", res);
      return res;
    },
    {
      manual: true,
      onSuccess(res) {
        setstartState(!startState);
        messageApi.open({
          type: "success",
          content: "标星成功",
        });
      },
    },
  );
  //对问卷进行复制
  //用于打开对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  //复制问卷之后跳转到编辑页面
  const { run: copyquestionData, loading: copyquestionData_loading } = useRequest(
    async () => {
      const result = await CopyQuestionData(id);
      return result;
    },
    {
      manual: true,
      onSuccess(result) {
        nav(`/question/edit/${result.id}`);
        message.success("复制成功");
      },
    },
  );
  //对于问卷进行假删除
  const [deleteState, setdeleteState] = useState(isDelete);
  const { run: deletequestionData, loading: deletequestionData_loading } = useRequest(
    async () => {
      const res = await updateQuestionData(id, {
        isDelete: true,
      });
      return res;
    },
    {
      manual: true,
      onSuccess(res) {
        setdeleteState(true);
        message.success("删除成功");
      },
    },
  );
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    copyquestionData();
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //问卷列表数据
  if (deleteState) return null;
  return (
    <div className={bindClassNames("QuestionCard")}>
      <Modal okText="确认" cancelText="取消" title="确定复制？" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>复制《{title}》问卷为模板问卷？</p>
      </Modal>
      {contextHolder}
      <div className={bindClassNames("head")}>
        <div className={bindClassNames("left")}>
          <Flex gap="small">
            {startState ? <StarOutlined style={{ color: "red" }} /> : ""}
            <Link to={isPublished ? `/question/stat/${id}` : `/question/edit/${id}`}>{title}</Link>
          </Flex>
        </div>
        <div className={bindClassNames("right")}>
          <Flex gap="small">
            <Tag
              onClick={() => {
                publishquestionDate(id);
              }}
              color={isPublished ? "processing" : "default"}
            >
              {isPublished ? "已发布" : "未发布"}
            </Tag>
            <div>答卷:{answerCount}</div>
            <div>{createTime}</div>
          </Flex>
        </div>
      </div>
      <Divider style={{ margin: "10px 0px" }}></Divider>
      <div className={bindClassNames("middle")}>
        <div className={bindClassNames("left")}>
          <Flex gap="middle">
            <Button
              size="small"
              icon={<EditOutlined />}
              onClick={() => {
                nav(`/question/edit/${id}`);
              }}
              disabled={isPublished}
            >
              编辑问卷
            </Button>
            <Button
              size="small"
              icon={<BarChartOutlined />}
              onClick={() => {
                nav(`/question/stat/${id}`);
              }}
            >
              数据统计
            </Button>
          </Flex>
        </div>
        <div className={bindClassNames("right")}>
          <Flex gap="middle">
            <Button
              disabled={startquestionData_loading}
              size="small"
              icon={<StarOutlined style={{ color: startState ? "red" : "gray" }} />}
              onClick={() => {
                startquestionData();
              }}
            >
              {startState ? "取消" : "标星"}
            </Button>
            <Button size="small" icon={<CopyOutlined />} onClick={showModal} disabled={copyquestionData_loading}>
              复制
            </Button>
            <Popconfirm
              title="确定是否删除"
              onConfirm={() => {
                deletequestionData();
              }}
              okText="删除"
              cancelText="取消"
            >
              <Button size="small" icon={<DeleteOutlined />} disabled={deletequestionData_loading}>
                删除
              </Button>
            </Popconfirm>
          </Flex>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
